// lazy函数用于做懒加载
import React, { useState, lazy, Suspense } from "react";

// 这个import叫import命令，import命令是同步
// import Child from "./Child";

// 需要改成import函数的形式，结合lazy
const Child = lazy(() => import("./Child"));

const App = () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <h2>app组件</h2>
      <button onClick={() => setShow(true)}>btn</button>
      {show && (
        <Suspense fallback={<div>loading...</div>}>
          <Child />
        </Suspense>
      )}
    </>
  );
};

export default App;
